<template>
    <f7-page >
    	<f7-navbar>
            <f7-nav-left>
                <f7-link @click="back">
                    <f7-icon icon="icon-back"></f7-icon>
                </f7-link>
            </f7-nav-left>
            <f7-nav-title title="忘记密码"></f7-nav-title>
    	</f7-navbar>
		<div class="my-view">
		<f7-block  >
			<f7-list no-hairlines style="margin-top: 30px;">
				<f7-list-input type="text" placeholder="用户名/手机" label="用户名/手机" clear-button floating-label outline>
					<f7-icon f7="person" slot="media"></f7-icon>
				</f7-list-input>
				<f7-list-item>
					<f7-list-input class="my-no-padding-left" type="text" placeholder="验证码" label="验证码"
								   clear-button outline style="width: 60%;">
						<f7-icon f7="photo" slot="media"></f7-icon>
					</f7-list-input>
					<f7-button fill style="margin-right: 5px;"
						@click="getCheckCode" :disabled="countDown > 0">
						{{countDown == 0 ? '获取验证码' : showCountDown}}
					</f7-button>
				</f7-list-item>
			</f7-list>
			<f7-list no-hairlines style="margin-top: -30px;">
				<f7-list-input type="password" placeholder="请输入新密码" label="请输入新密码" clear-button floating-label outline>
					<f7-icon f7="lock" slot="media"></f7-icon>
				</f7-list-input>
				<f7-list-item>
					<f7-list-input class="my-no-padding-left" type="password" placeholder="请再次输入密码" label="请再次输入密码"
								   clear-button floating-label outline>
						<f7-icon f7="lock" slot="media"></f7-icon>
					</f7-list-input>
				</f7-list-item>
			</f7-list>
		</f7-block>
    	<f7-block>
    		<f7-row>
    			<f7-col>
    				<f7-button  big raised round>重置密码</f7-button>
    			</f7-col>
    		</f7-row>
    	</f7-block>
		</div>
    </f7-page>

</template>

<script>
import checkCode from '@/mixins/checkCode.js';
import back from '@/mixins/back.js';

export default {
	mixins: [checkCode, back],
	data() {
		return {
		}
	},
	methods: {
		getCheckCode() {
			this.toggleCheckCode();
		}
	}
}
</script>

<style scoped>
.my-view{
	background-color: white;
	margin: 20px 10px;
	padding-bottom: 20px;
	padding-top: 20px;
	border-radius: 20px;
	box-shadow: #dfdfe0 0px 0px 10px 1px;
}
</style>
